<template>
    <div>
        <!-- @back="router.go(-1)表示返回上一级 -->
        <a-page-header
      :style="{ background: 'var(--color-bg-2)' }"
      :title="title"
      @back="router.go(-1)">
        </a-page-header>
    </div>
    <div class="page">
        <!-- ref="formRef"：是为了引用表单而定义的 -->
        <a-form ref="formRef" :model="blog" layout="vertical">
      <a-form-item field="title" label="标题" :rules="[{ required: true, message: '请输入标题' }]">
        <a-input v-model="blog.title" placeholder="请输入标题" />
        </a-form-item>
      <a-form-item field="summary" label="摘要" :rules="[{ required: true, message: '请输入摘要' }]">
        <a-input v-model="blog.summary" placeholder="请输入摘要" />
        <!-- <a-textarea placeholder="请输入摘要" allow-clear/> -->
        </a-form-item>
        <a-form-item field="content" label="内容" >
        <MdEditor 
        v-model="blog.content"
        @onSave="onSave" />
        </a-form-item>
        </a-form>
    </div>
    
</template>

<script setup>
import {  useRouter } from 'vue-router';
import {onBeforeMount, ref} from 'vue'
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {UPDATE_BLOG} from '../../../api/blog'
import {CREATE_BLOG,GET_BLOG} from '../../../api/blog'
import { Message } from '@arco-design/web-vue'
 
// const vertical = ref('vertical')
const router = useRouter()
const blog = ref({
    id: 0, //根据id来判断是保存，还是更新
    title: '',
    summary: '',
    content: '',
})

const formRef=ref(null)

// 不能再这里定义payload，如果再这里定义payload，下面代码引用payload.id的值，则始终为0导致报错
// const payload = blog.value
const onSave = async()=>{
    // 1.校验form(校验就是，是否满足form规则)
    // validate的返回值是Promise对象
    const validate = await formRef.value.validate()
    // 校验没报错时，返回undefined
    // console.log(validate)
    // 为了方便定义的payload，也可以直接使用blog.value.id
    const payload = blog.value
    // 2.保存内容
    // 如果没有 if (!validate)，即使校验没通过，程序还会往下走
    if (!validate) {
        // 根据blog中的id来判断更新或创建
        if (blog.value.id) {
            try {
                // 更新
                const resp = await UPDATE_BLOG(payload.id,payload)
                console.log(resp)
                blog.value = resp 
                console.log(payload)
                Message.success(`更新成功`)
            } catch (error) {
                Message.error(`更新失败:${error.message}`)
            }
        }else{
            try {
                // 创建
                const resp = await CREATE_BLOG(payload)
                console.log(resp)
                blog.value = resp
                Message.success(`创建成功`)
            } catch (error) {
                Message.error(`创建失败:${error.message}`)
            }
        }   
    }
}

const title = ref("创建文章")
// 补充编辑逻辑，编辑后还是要执行保存事件
const filledUpateData= async()=>{
    // router.currentRoute.value.query.id表示获取当前路由(url)中的id
    const blogid = router.currentRoute.value.query.id
    if (blogid){
        title.value = "更新文章"
        try {
            const resp = await GET_BLOG(blogid)
            blog.value = resp
        } catch (error) {
            Message.error(`获取博客失败:${error.message}`)
        }
    }
}
// onBeforeMount是vue中的钩子，要导入
onBeforeMount(()=>{
    filledUpateData()
}
)

</script>

<style lang="css" scoped>

</style>